<template>
  <div>
    <div class="box" v-if="!orMap">
      <div class="box-center">
        <div class="head">
          <div class="head-name">{{ username }}</div>
          <!--<div class="head-text">
                  <TitleText></TitleText>
              </div> -->

          <div class="head-date">
            <div class="head-date-text"> {{ today }}</div>
            <!-- <img src="../assets/largeScreen/fullscreen.png" alt="" class="fullscreen-img"> -->
          </div>
          <div class="head-box"></div>
          <div class="head-box1"></div>
          <div class="head-box2"></div>
          <div class="head-box3"></div>
          <div class="head-box4"></div>
          <div class="head-box5"></div>
          <!-- <div class="head-box6"></div> -->
        </div>
        <div class="bodys">
          <el-row>
            <el-col :span="6">
              <div class="body-left">
                <div class="today-overview">
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="8">
                        <div class="today-overview-haed-txt" style="min-width:132px">今日出租概况</div>
                      </el-col>
                      <el-col :span="16">
                        <div class="router-box"><img src="../assets/largeScreen/route@2x.png" alt=""
                                                     class="router-img"></div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="today-overview-body">
                    <el-row style="width:100%">
                      <el-col :span="8">
                        <div class="today-overview-body-left">
                          <div class="circularRotation-box"><img
                            src="../assets/largeScreen/circularRotation.png" alt=""
                            class="circularRotation-img" ref="imgRotate"></div>
                          <div class="circularRotation-value">{{ rentalRate }}</div>
                          <div class="circularRotation-txt">出租率</div>
                        </div>
                      </el-col>
                      <el-col :span="16">
                        <div class="today-overview-body-right">
                          <div class="today-overview-body-top">
                            <div><img src="../assets/largeScreen/toDayOrder.png" alt=""
                                      class="lease-img"></div>
                            <div class="lease-box">
                              <div class="lease-box-tit">
                                <span class="lease-box-tit-tet">出租订单</span>
                                <span class="lease-box-tit-value">{{ onRentCar }}</span>
                              </div>
                              <div class="lease-box-body"><img
                                src="../assets/largeScreen/leaseLine.png" alt=""
                                class="lease-box-body-img">
                                <div class="head-box7"></div>
                              </div>
                            </div>
                          </div>
                          <div class="today-overview-body-top">
                            <div><img src="../assets/largeScreen/toDayCar.png" alt=""
                                      class="lease-img"></div>
                            <div class="lease-box">
                              <div class="lease-box-tit">
                                <span class="lease-box-tit-tet car">本店车辆</span>
                                <span class="lease-box-tit-value">{{ carTotal }}</span>
                              </div>
                              <div class="lease-box-body"><img
                                src="../assets/largeScreen/idleLine.png" alt=""
                                class="lease-box-body-img">
                                <div class="head-box7"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>

                    <div></div>
                  </div>
                </div>
                <div class="today-overview">
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="6">
                        <div class="today-overview-haed-txt" style="min-width: 96px;">订单概况</div>
                      </el-col>
                      <el-col :span="18">
                        <div class="router-box"><img src="../assets/largeScreen/route@2x.png" alt=""
                                                     class="router-img"></div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="oeder-body">
                    <div class="oeder-body-box" v-for="(item, index) in orderSummary" :key="index">
                      <div class="oeder-body-img"><img src="../assets/largeScreen/order.png" alt=""
                                                       class="rderBox-img">
                      </div>
                      <div class="oeder-body-num">{{ item.num }}</div>
                      <div class="oeder-body-txt">{{ item.value }}</div>
                    </div>
                    <!-- <Order></Order> -->
                  </div>
                </div>

                <div class="ailyRent-body">
                  <vue-seamless-scroll :data="listData" class="warp" :class-option="classOption">
                    <div v-if="listDataType" class="warp-lis">
                      <img src="../assets/largeScreen/null.png" alt="" class="null-img">
                    </div>
                    <div v-if="!listDataType">
                      <div v-for="(item, index) in listData" :key="index" class="warp-li">
                        <div :class="item.className ? 'dailyRentalOrder' : ''" class="warp-li-box">
                        </div>
                        <div class="warp-li-txt color1" v-if="item.orderSource > 4">{{
                            item.orderSourceName || item.trainOperationName
                          }}
                        </div>
                        <div class="warp-li-txt color3" v-if="item.orderSource == 1">{{
                            item.orderSourceName || item.trainOperationName
                          }}
                        </div>
                        <div class="warp-li-txt color2" v-if="item.orderSource == 2">{{
                            item.orderSourceName || item.trainOperationName
                          }}
                        </div>
                        <div class="warp-li-txt color4" v-if="item.orderSource == 3">{{
                            item.orderSourceName || item.trainOperationName
                          }}
                        </div>
                        <div class="warp-li-txt color1" v-if="item.orderSource == 4">{{
                            item.orderSourceName || item.trainOperationName
                          }}
                        </div>
                        <div class="warp-li-value" v-text="item.content"></div>

                      </div>
                    </div>

                  </vue-seamless-scroll>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="body-center">
                <div class="body-center-head">
                  <div class="body-center-head-box">
                    <div class="statisticsItem" v-for="(item, index) in statisticsTypes" :key="index" >
                      <div class="statisticsTitle">{{item.title}}</div>
                      <div class="statisticsValue">{{item.value}}</div>
                    </div>
                  </div>
                </div>
                <div class="publish-Region">
                  <!-- <div ref="mapCharts" class="chart"></div> -->
                  <ChinaMap style="height:52vh;width:44vw" :mapChange="mapChange" :typeInfo="mapTypeInfo" :show-store="false">
                  </ChinaMap>
                </div>
                <div>
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="3">
                        <div class="today-overview-haed-txt" style="min-width:120px">财务概况</div>
                      </el-col>
                      <el-col :span="21">
                        <div class="router-box"><img src="../assets/largeScreen/line.png" alt=""
                                                     class="router-img" style="margin-top:1.5vh"></div>
                      </el-col>
                    </el-row>
                  </div>

                  <div class="publish-Region">
                    <!--                                        <div class="publish-Region-btn" >-->
                    <!--                                            <div class="publish-Region-txt"-->
                    <!--                                                :class="financeDate == 1 ? 'financeDateClass' : ''">-->
                    <!--                                                近期-->
                    <!--                                            </div>-->
                    <!--                                            <div class="publish-Region-txt"-->
                    <!--                                                :class="financeDate == 2 ? 'financeDateClass' : ''">-->
                    <!--                                                近一年-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <div class="publish-Region-chart">
                      <div id="financeChart"></div>
                    </div>

                  </div>
                </div>

              </div>
            </el-col>
            <el-col :span="6">
              <div class="body-right">
                <div class="body-right-box">
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="6">
                        <div class="today-overview-haed-txt" style="min-width:120px">车辆概况</div>
                      </el-col>
                      <el-col :span="18">
                        <div class="router-box"><img src="../assets/largeScreen/route@2x.png" alt=""
                                                     class="router-img"></div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="body-right-car">
                    <div class="car-box">
                      <img src="../assets/largeScreen/yuan.png" class="car-box-img" ref='carBoxImg'
                           alt="">
                      <div class="car-box1">
                        <div>用车中</div>
                        <div class="car-box1-num">{{ inUse }}</div>
                      </div>
                      <div class="car-box2">
                        <div>已下线</div>
                        <div class="car-box1-num">{{ offline }}</div>
                      </div>
                      <div class="car-box3">
                        <div>维修保养</div>
                        <div class="car-box1-num">{{ maintenance }}</div>
                      </div>
                      <div class="car-box4">
                        <div>全部</div>
                        <div class="car-box4-num">{{ all }}</div>
                      </div>
                      <div class="car-box5" @click="carState(0, 8)">
                        <div :class='carColor' class="car-box1-text">商业险到期</div>
                        <div class="car-box2-num" :class='carColor'>{{ syxdq }}</div>
                      </div>
                      <div class="car-box6" @click="carState(0, 9)">
                        <div :class='carColor1' class="car-box1-text">交强险到期</div>
                        <div class="car-box2-num" :class='carColor1'>{{ jqxdq }}</div>
                      </div>
                      <div class="car-box7" @click="carState(0, 10)">
                        <div :class='carColor2' class="car-box1-text">年检到期</div>
                        <div class="car-box2-num" :class='carColor2'> {{ njdq }}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="body-right-box">
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="6">
                        <div class="today-overview-haed-txt" style="min-width:120px">违章概况</div>
                      </el-col>
                      <el-col :span="18">
                        <div class="router-box"><img src="../assets/largeScreen/route@2x.png" alt=""
                                                     class="router-img"></div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="today-overview-regulations">
                    <div class="today-overview-regulations-box">
                      <div class="today-box box-img1">
                        <div class="today-box-num " style="color:#66F7F9">{{ carNum }}</div>
                        <div class="today-box-txt">未处理车辆</div>

                      </div>
                      <div class="today-box box-img2">
                        <div class="today-box-num " style="color:#60FC83">{{ UnhandledNum }}</div>
                        <div class="today-box-txt">未处理违章</div>
                      </div>
                    </div>
                    <div class="today-overview-regulations-box">
                      <div class="today-box box-img3">
                        <div class="today-box-num " style="color:#F48561">{{ UnhandledFines }}</div>
                        <div class="today-box-txt">未处理罚款</div>
                      </div>
                      <div class="today-box box-img4">
                        <div class="today-box-num " style="color:#FC6079">{{ UnhandledScore }}</div>
                        <div class="today-box-txt">未处理扣分</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="body-right-box">
                  <div class="today-overview-haed">
                    <div class="img-box"><img src="../assets/largeScreen/circle@2x.png" alt=""
                                              class="today-img"></div>
                    <el-row>
                      <el-col :span="6">
                        <div class="today-overview-haed-txt" style="min-width:120px">告警监控</div>
                      </el-col>
                      <el-col :span="18">
                        <div class="router-box"><img src="../assets/largeScreen/route@2x.png" alt=""
                                                     class="router-img"></div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="alert-box">
                    <AlarmMonitoring v-if="showCilc" :alarmMonitoringData="alarmMonitoringData"></AlarmMonitoring>
                  </div>
                </div>

                <div class="ailyRent-body">
                  <vue-seamless-scroll :data="listData1" class="warp" :class-option="classOption">
                    <div v-if="listData1Type" class="warp-lis1">
                      <img src="../assets/largeScreen/null.png" alt="" class="null-img1">
                    </div>
                    <div v-if="!listData1Type">
                      <div v-for="(item, index) in listData1" :key="index" class="warp-li1">
                        <div :class="item.className ? 'dailyRentalOrder' : ''" class="warp-li-box">
                        </div>
                        <div class="warp-li-txt1 color1" v-if="item.type == 1">{{ item.typeName }}
                        </div>
                        <div class="warp-li-txt1 color6" v-if="item.type == 2">{{ item.typeName }}
                        </div>
                        <div class="warp-li-txt1 color2" v-if="item.type == 3">{{ item.typeName }}
                        </div>
                        <div class="warp-li-txt1 color6" v-if="item.type == 4">{{
                            item.alarmName
                          }}
                        </div>
                        <div class="warp-li-value" v-text="item.carNo"></div>

                        <div class="warp-li-value" v-text="item.expirationTime || item.alarmTime">
                        </div>

                      </div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


    </div>
    <div class="box3" v-if="orMap">
      <ChinaMaps style="height:100vh;width:90vw" :mapChange="mapChange"></ChinaMaps>
    </div>
  </div>
</template>

<script>

import map from '@/utils/china.geo.json'
import * as echarts from 'echarts'
import moment from "moment"
import vueSeamlessScroll from 'vue-seamless-scroll'
import AlarmMonitoring from './shujudaping/alarmMonitoring'
import TitleText from './shujudaping/title'
import Order from './shujudaping/order'
import Cookies from 'js-cookie'
import ChinaMap from '../components/china/index.vue'
import ChinaMaps from './shujudaping/chine'
import {
  todayRentalOverview,
  orderOverview,
  contractOverview,
  dailyRentalOrders,
  vehicleOverview,
  overviewOfViolations,
  alarmMonitoring,
  maintenanceData,
  todayRent,
  financialOverview
} from '../api/largeScreen/index.js'

export default {
  data() {
    return {
      mapTypeInfo: true, // 图片子页面缩放按钮
      orMap: false,// 地图是否放大
      myChart: null,
      today: '',
      orderSummary: [
        {
          num: 0,
          value: '2小时取车'
        },
        {
          num: 0,
          value: '2小时还车'
        },
        {
          num: 0,
          value: '今日取车'
        },
        {
          num: 0,
          value: '今日还车'
        },
        {
          num: 0,
          value: '明日取车'
        },
        {
          num: 0,
          value: '明日还车'
        },
        {
          num: 0,
          value: '逾期未取'
        },
        {
          num: 0,
          value: '逾期未还'
        },
      ], // 订单概况
      contract: [
        {
          text: '带出租方签署',
          num: 100,
        },
        {
          text: '待承租方签署',
          num: 60,
        },
      ], // 合同概况
      listData: [], // 滚动数据
      listData2: [], // 滚动图标
      listData1: [], // 维保数据
      alertData: [], // 告警监控
      classOption: {
        step: 0.3,
        limitMoveNum: 5,
      }, // 滚动速度
      classOption1: {
        step: 0.3,
        limitMoveNum: 1,
      }, // 滚动速度
      dailOrderImg: require('../assets/largeScreen/orderCardBorder.png'), // 滚动默认底图
      dailOrderType: 1, // 订单滚动类型
      dailMaintenanceType: 1, // 维保滚动类型
      dailMaintenanceImg: require('../assets/largeScreen/orderCardBorder.png'), // 滚动默认底图
      financeDate: 1, // 财务概况时间切换
      acrowImg: require('../assets/largeScreen/arrow.png'),
      rentalRate: '0%', // 出租率
      onRentCar: 0, // 出租车辆
      notRentCar: 0, // 空闲车辆
      carTotal: 0, // 空闲车辆
      offline: 0, // 下线车辆
      syxdq: 0, // 商业险到期
      jqxdq: 0, // 交强险到期
      inUse: 0, // 用车中
      njdq: 0,// 年检到期
      maintenance: 0, // 维修保养
      all: 0, // 全部
      carNum: 0, // 未处理车辆
      UnhandledNum: 0, // 未处理违章
      UnhandledFines: 0, // 未处理罚款
      UnhandledScore: 0, // 未处理扣分
      username: '', // 用户名称
      receivable: '0', // 应收
      received: '0', // 已收
      statisticsTypes: [{
        title: '今日运营收入应收(元)',
        value: 0
      }, {
        title: '今日运营收入已收(元)',
        value: 0
      }, {
        title: '今日预取订单应收(元)',
        value: 0
      }, {
        title: '今日预取订单已收(元)',
        value: 0
      }],//订单滚动tab
      listDataType: true, // 日租订单空
      listData1Type: true, // 维保数据空
      timeXList: [], // 财务X轴数据
      timeYList: [], // 财务Y轴数据
      timeList: [], // 财务数据
      carColor: '', // 商业险到期颜色
      carColor1: '', // 交强险到期颜色
      carColor2: '', // 年检到期颜色
      timerTimeout: null, // 定时器
      storeId:null, //门店id,
      showCilc:false,
      alarmMonitoringData: [{value: 0, name: '断电', itemStyle: {color: '#5B91FF'}},
        {value: 0, name: '低电', itemStyle: {color: '#54FFC6'}},
        {value: 0, name: '停留', itemStyle: {color: '#1890FF'}},
        {value: 0, name: '离线', itemStyle: {color: '#FD5859'}},
        {value: 0, name: '拆卸', itemStyle: {color: '#F6BD16'}},
        {value: 0, name: '驶入围栏', itemStyle: {color: '#75F6FF'}},
        {value: 0, name: '驶出围栏', itemStyle: {color: '#FF7C4A'}}]

    }
  },
  components: {
    vueSeamlessScroll,
    ChinaMap,
    AlarmMonitoring,
    Order,
    TitleText,
    ChinaMaps,
  },
  mounted() {
    this.username = this.$store.state.user.tenantName
    let time1 = new Date().getDay()
    let time2 = moment().format('YYYY-MM-DD')
    let time3 = this.getWeek(time1)
    this.today = `${time2}`
    // this.init(); // 地图

    this.rotateImage()
    this.listData2 = [this.acrowImg]
    this.getTodayRentalOverview()
    this.getOrderOverview()
    this.getDailyRentalOrders(1)
    this.getVehicleOverview()
    this.getOverviewOfViolations()
    this.getOverviewOfViolations()
    this.getMaintenanceData()
    this.getfinanceDate(1)
    this.getTodayRent()
    this.getAlarmMonitoring()
    this.allpoart()
  },
  watch: {},
  methods: {
    // // 维保跳转
    // maintenances(info) {
    //     let type = null
    //     if (info == 1) {
    //         type = 8
    //     } else if (info == 2) {
    //         type = 9
    //     } else if (info == 3) {
    //         type = 10
    //     }
    //     this.$router.push({ path: '/car/car_basic', query: { key: 0, type: type } })
    // },
    // // 车务排班跳转
    // vehicleScheduling() {
    //     this.$router.push({
    //         path: '/ota/ctripr'
    //     })
    // },
    // // 日租订单跳转
    // dailyOrder(info) {
    //     this.$router.push({
    //         path: '/orderBasic/detail',
    //         query: { orderNo: info }
    //     })
    // },
    // // 告警概况跳转
    // alarm() {
    //     this.$router.push({ path: '/riskManagement/warn' })
    // },
    // // 违章概况跳转
    // regulations() {
    //     this.$router.push({ path: '/riskManagement/illegalManager/illegal' });
    // },
    // // 车辆概况跳转
    // carState(key, type) {
    //     this.$router.push({ path: '/car/car_basic', query: { key: key, type: type } })
    // },
    // // 订单概况详情跳转
    // orderIime(info) {
    //     let type = null
    //     if (info === '2小时取车') {
    //         type = 12
    //     } else if (info === '2小时还车') {
    //         type = 14
    //     } else if (info === '今日取车') {
    //         type = 11
    //     } else if (info === '今日还车') {
    //         type = 13
    //     } else if (info === '明日取车') {
    //         type = 111
    //     } else if (info === '明日还车') {
    //         type = 131
    //     } else if (info === '逾期未取') {
    //         type = 15
    //     } else if (info === '逾期未还') {
    //         type = 16
    //     }
    //     this.$router.push({ path: '/order/order', query: { key: type } })
    // },
    // 接口30秒循环调用
    allpoart() {
      this.timerTimeout = setInterval(() => {
        this.getTodayRentalOverview()
        this.getOrderOverview()
        this.getDailyRentalOrders(1)
        this.getVehicleOverview()
        this.getOverviewOfViolations()
        this.getOverviewOfViolations()
        this.getMaintenanceData(1)
        this.getfinanceDate(1)
        this.getTodayRent()
        this.getAlarmMonitoring()
      }, 30000)
    },
    // 今日运营收入
    getTodayRent() {
      todayRent().then(res => {
        if (res.code == 200) {
          const data = res.data;
          this.statisticsTypes[0].value = data.receivable||0;
          this.statisticsTypes[1].value = data.received||0;
          this.statisticsTypes[2].value =data.receivableQc||0;
          this.statisticsTypes[3].value = data.receivedQc||0;
        }
      });
    },
    // 出租概况
    getTodayRentalOverview() {
      todayRentalOverview().then(res => {
        if (res.code == 200) {
          this.rentalRate = `${res.data.rentalRate}%`
          this.onRentCar = res.data.onRent
          this.notRentCar = res.data.notRent
          this.carTotal = res.data.carTotal
        }
      });
    },
    // 订单概况
    getOrderOverview() {
      orderOverview().then(res => {
        if (res.code == 200) {
          this.orderSummary.map((item) => {
            if (item.value === '2小时取车') {
              item.num = res.data.twohqc
            }
            if (item.value === '2小时还车') {
              item.num = res.data.twohhc
            }
            if (item.value === '今日取车') {
              item.num = res.data.jrqc
            }
            if (item.value === '今日还车') {
              item.num = res.data.jrhc
            }
            if (item.value === '明日取车') {
              item.num = res.data.tomorrowTakeCar
            }
            if (item.value === '明日还车') {
              item.num = res.data.tomorrowReturnCar
            }
            if (item.value === '逾期未取') {
              item.num = res.data.yqwq
            }
            if (item.value === '逾期未还') {
              item.num = res.data.yqwh
            }
          })
        }
      })
    },
    // 日租订单/车务排班
    getDailyRentalOrders(type) {
      dailyRentalOrders().then(res => {
        this.listData = []
        if (res.code == 200) {
          let list1 = JSON.parse(JSON.stringify(res.data.jrdq))
          list1.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          let list2 = JSON.parse(JSON.stringify(res.data.jrdh))
          list2.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          let list3 = JSON.parse(JSON.stringify(res.data.scheduling1))
          list3.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          let list4 = JSON.parse(JSON.stringify(res.data.scheduling2))
          list4.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          this.listData = list2
          this.listData = [...list1, ...list2,...list3, ...list4]

        }
        if (this.listData.length > 0) {
          this.listDataType = false
        } else {
          this.listDataType = true
        }

      })
    },
    // 车辆概况
    getVehicleOverview() {
      vehicleOverview().then(res => {
        if (res.code == 200) {
          this.inUse = res.data.inUse
          this.all = res.data.all
          this.jqxdq = res.data.jqxdq
          this.maintenance = res.data.maintenance
          this.njdq = res.data.njdq
          this.offline = res.data.offline
          this.syxdq = res.data.syxdq
          if (res.data.syxdq > 10 && res.data.syxdq < 20) {
            this.carColor = 'carColoryellow'
          } else if (res.data.syxdq > 20) {
            this.carColor = 'carColorred'
          }
          if (res.data.jqxdq > 10 && res.data.jqxdq < 20) {
            this.carColor1 = 'carColoryellow'
          } else if (res.data.jqxdq > 20) {
            this.carColor1 = 'carColorred'
          }
          if (res.data.njdq > 10 && res.data.njdq < 20) {
            this.carColor2 = 'carColoryellow'
          } else if (res.data.njdq > 20) {
            this.carColor2 = 'carColorred'
          }
        }

      })
    },
    // 违章概况
    getOverviewOfViolations() {
      overviewOfViolations().then(res => {
        if (res.code == 200) {
          this.carNum = res.data.carNum ? res.data.carNum : 0
          this.UnhandledFines = res.data.UnhandledFines ? res.data.UnhandledFines : 0
          this.UnhandledNum = res.data.UnhandledNum ? res.data.UnhandledNum : 0
          this.UnhandledScore = res.data.UnhandledScore ? res.data.UnhandledScore : 0
        }

      })
    },
    //告警监控
    getAlarmMonitoring(){
      this.showCilc = false;
      alarmMonitoring({
        storeId: this.storeId
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.alarmMonitoringData[0].value = res.data.outage||0
          this.alarmMonitoringData[1].value = res.data.lowElectricity||0
          this.alarmMonitoringData[2].value = res.data.stop||0
          this.alarmMonitoringData[3].value = res.data.offline||0
          this.alarmMonitoringData[4].value = res.data.detach||0
          this.alarmMonitoringData[5].value = res.data.driveIn||0
          this.alarmMonitoringData[6].value = res.data.driveOut||0
          this.showCilc = true;
        }
      })
    },
    // 维保数据/告警数据
    getMaintenanceData() {
      maintenanceData().then(res => {
        this.listData1 = []
        if (res.code == 200) {
          let list1 = JSON.parse(JSON.stringify(res.data.maintenance))
          list1.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          let list2 = JSON.parse(JSON.stringify(res.data.carAlarms))
          list2.map((res, index) => {
            if (index % 2 !== 0) {
              res.className = true
            } else {
              res.className = false
            }
          })
          this.listData1 = [...list1, ...list2]

        }
        if (this.listData1.length > 0) {
          this.listData1Type = false
        } else {
          this.listData1Type = true
        }

      })
    },
    // 金额转化
    amountConversion(info) {
      let num = ''
      if (info) {
        if (info <= 9999) {
          let num1 = Math.round(info)
          num = `${num1}`
        } else if (info > 9999 && info <= 99999999) {
          let num1 = Math.round(info / 10000)
          num = `${num1}万`
        } else if (info > 99999999) {
          let num1 = Math.round(info / 100000000)
          num = `${num1}亿`
        }
      }
      return num
    },
    // 地图组件传回来的方法
    mapChange(info, data) {
      if (info === 1) {
        // this.$router.push('/gps/vehiclemonitoringpage')
        this.orMap = true
        this.mapTypeInfo = false
      } else {
        this.orMap = false
        this.mapTypeInfo = true
        this.$nextTick(() => {
          this.charts() // 柱状图
        })
      }

    },
    // 获取财务概况
    getfinanceDate(info) {
      if (info === 1) {
        this.financeDate = 1
      } else {
        this.financeDate = 2
      }
      financialOverview({type: info}).then(res => {
        if (res.code == 200) {
          this.timeXList = res.data.times
          this.timeYList = res.data.amout
          this.timeList = res.data.item
          this.charts() // 柱状图
        }

      })
    },
    // 日租订单-车务排班切换
    dailOrder(info) {
      this.dailOrderType = info
      this.getDailyRentalOrders(info)
      if (info == 1) {
        this.dailOrderImg = require('../assets/largeScreen/orderCardBorder.png')
      } else if (info == 2) {
        this.dailOrderImg = require('../assets/largeScreen/orderCardBorder2.png')
      }
    },
    // 图片自己旋转
    rotateImage() {
      let spinner = this.$refs.imgRotate
      let spinner1 = this.$refs.carBoxImg
      let deg = 0
      setInterval(() => {
        deg += 1
        spinner.style.transform = 'rotate(' + deg + 'deg)'
        spinner1.style.transform = 'rotate(' + deg + 'deg)'
      }, 10)
    },
    getWeek(date) { // 参数时间戳
      switch (date) {
        case 1:
          return '周一'
        case 2:
          return '周二'
        case 3:
          return '周三'
        case 4:
          return '周四'
        case 5:
          return '周五'
        case 6:
          return '周六'
        case 0:
          return '周日'
      }
    },
    // 柱状图
    charts() {
      var that = this
      const myChart = echarts.init(document.getElementById('financeChart'));
      var option;
      let yData = that.timeYList
      let xData = that.timeXList
      let dataList = that.timeList
      let datacoords = [];
      let flicker = []
      for (var i = 0; i < xData.length; i++) {
        datacoords.push([
          {
            coord: [i, yData[i]],
          },
          {
            coord: [i + 1, yData[i + 1]],
          },
        ]);

        flicker.push([xData[i], yData[i]])
      }

      option = {
        animation: true, //控制动画示否开启
        animationDuration: 3000,
        animationEasing: "bounceOut", //缓动动画
        animationThreshold: 8, //动画元素的阈值
        backgroundColor: "transparent", // 给echarts图设置背景色

        tooltip: {
          trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
          triggerOn: 'mousemove', // 鼠标移动时触发
          axisPointer: {
            type: 'none',
          },
          backgroundColor: 'transparent',
          padding: '0px',
          borderColor: '#53E8FF',
          formatter: function (params) {
            let obj = null
            dataList.map((res) => {
              if (res.time == params[0].name) {
                obj = res
              }
            })
            var str = `<div style = "background:url( ${require("../assets/largeScreen/rectangle.png")})  repeat center center ;padding:10px;backdrop-filter: blur(10px);color:#fff;background-color:#0c286335">
                                    <div>营运收入：${obj.operatingIncome}元</div>
                                    <div>营运支出：${obj.operatingExpenses}元</div>
                                    <div>借出收入：${obj.borrowingIncome}元</div>
                                    <div>借入支出：${obj.borrowingExpenses}元</div>
                                    <div>车辆处置收入：${obj.vehicleDisposalIncome}元</div>
                                    <div>车辆管理支出：${obj.vehicleManagementExpenses}元</div>
                                    <div>其他成本支出：${obj.otherCostExpenses}元</div>
                                    <div>总应收：${obj.totalReceivables}元</div>
                                </div>`
            return str
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '8%'
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,//代表显示所有x轴标签显示
            }

          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            show: false,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            show: false,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                // 第三个值表示底部左下角，第四个值表示底部右下角
                barBorderRadius: [4, 4, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#3C6FDD'
                  },
                  {
                    offset: 1,
                    color: '#61A6F4'
                  }
                ])
              }
            },
            label: {
              show: true,
              position: 'top',
              distance: 20,
              fontSize: 14,
              color: '#fff',
              formatter: function (param) {
                let str = ''
                if (param.value) {
                  str = that.amountConversion(param.value)
                }
                return str
              }
            },
            data: yData
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#FFC02A', // 折线线条颜色:红色
              },
            },
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: '#FFC02A',
              },
            },
            data: yData
          },
          {
            // 设置涟漪特效动画
            type: 'effectScatter',
            coordinateSystem: 'cartesian2d',
            // 单个闪烁点 ↓
            data: flicker, //2d坐标系--[x轴, y轴, 标记大小]
            symbolSize: 10,

            showEffectOn: 'render',
            // 涟漪特效配置
            rippleEffect: {
              // 波纹的绘制方式,可选'stroke'和'fill'
              brushType: 'stroke',
              period: 2, //动画的时间。
              scale: 3.5 //动画中波纹的最大缩放比例。
            },
            effect: {
              show: true,
              trailLength: 0.2, // 尾迹长度
              period: 6, // 特效动画的时间, 走完全程的时长
              symbolSize: [26, 72],
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#f5f503',
                shadowBlur: 20,
                shadowColor: '#fff'
              }
            },
            zlevel: 1
          },
          {
            showSymbol: false,
            name: "",
            type: "lines",
            polyline: true,
            smooth: false,
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            effect: {
              show: true,
              smooth: true,
              period: 6,
              symbolSize: 8,
            },
            lineStyle: {
              color: "#fff",
              width: 1,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },
            data: datacoords,
          },
        ]
      };

      option && myChart.setOption(option);

    },
  },
  destroyed() {
    clearInterval(this.timerTimeout)
  }
}
</script>

<style lang="scss" scoped>
.arrow-img {
  display: inline-block;
  width: 1vw;
  height: 2vh;
}

.custom-tooltip {
  background: url('../assets/largeScreen/mapAleart.png') center center no-repeat !important;
}


.dailyRentalOrder {
  background: #01B5DB;
  opacity: 0.1;
  z-index: -1
}

.publish-Region {
  width: 100%;
  position: relative;

  .publish-Region-chart {
    width: 100%;
    height: 26vh;
  }

  .publish-Region-btn {
    position: absolute;
    right: 1vw;
    top: 1vh;
    display: flex;

    .publish-Region-txt {
      border-radius: 2px 0px 0px 2px;
      opacity: 0.6;
      border: 1px solid #fff;
      font-weight: 400;
      color: #fff;
      padding: 0.5vh 0.5vw;
      font-size: 0.5vw;
      margin-right: 1vw;
      cursor: pointer;
      z-index: 2
    }

    .financeDateClass {
      color: #6CE4FB;
      border: 1px solid #6CE4FB;
    }

  }

  .chart {
    width: 100%;
    height: 67vh;
  }

  #financeChart {
    width: 100%;
    height: 100%;
  }
}

.box3 {
  width: 100%;
  height: auto;
  overflow-y: auto;
  background-image: url('../assets/largeScreen/background@2x.png');
}

.box {
  width: 100%;
  height: 100%;
  background-image: url('../assets/largeScreen/background@2x.png');
  background-size: 100% 100%;
  background-color: #0e1b3d;

  .box-center {
    margin: 0 10px 0 10px;
  }

  .head {
    width: 100%;
    height: 60px;
    background-image: url('../assets/largeScreen/largrScreentHead.png');
    background-size: 100% 60px;
    position: relative;

    .head-text {
      width: 14vw;
      height: 5vh;
      position: absolute;
      top: 1vh;
      left: 42%;

    }

    @keyframes glowing {
      0% {
        background-position: 400% 0;
        // transform: translate(10px, 20px );
      }

      50% {
        background-position: 200% 0;
      }

      100% {
        background-position: 0 0;
      }
    }

    @keyframes glowing1 {
      0% {
        background-position: 0 0;
        // transform: translate(10px, 20px );
      }

      50% {
        background-position: 200% 0;
      }

      100% {
        background-position: 400% 0;
      }
    }

    @keyframes glowing2 {
      0% {
        background: red;
        bottom: 30%;
        left: 0.7%;
      }

      5% {
        background: red;
        bottom: 0%;
        left: 2%;
      }

      25% {
        background: yellow;
        bottom: 0%;
        left: 20%;
      }

      30% {
        background: yellow;
        bottom: 30%;
        left: 25%;
      }

      50% {
        background: blue;
        left: 200px;
        top: 200px;
      }

      75% {
        background: green;
        left: 0px;
        top: 200px;
      }

      100% {
        background: red;
        left: 0px;
        top: 0px;
      }
    }

    .head-box {
      width: 13%;
      height: 0.1vh;
      position: absolute;
      bottom: 0;
      left: 1.5%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing 5s linear infinite;
    }

    .head-box1 {
      width: 19.5%;
      height: 0.1vh;
      position: absolute;
      bottom: 20%;
      left: 15.2%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing 5s linear infinite;
    }

    .head-box2 {
      width: 5%;
      height: 0.1vh;
      position: absolute;
      bottom: 0%;
      left: 35.5%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing 5s linear infinite;
    }

    .head-box3 {
      width: 13%;
      height: 0.1vh;
      position: absolute;
      bottom: 0;
      right: 1.5%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing1 5s linear infinite;
    }

    .head-box4 {
      width: 19.5%;
      height: 0.1vh;
      position: absolute;
      bottom: 20%;
      right: 15.2%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing1 5s linear infinite;
    }

    .head-box5 {
      width: 5%;
      height: 0.1vh;
      position: absolute;
      bottom: 0%;
      right: 35.5%;
      background-image: linear-gradient(45deg, #ff00ff, #00ffff);
      background-size: 400% 400%;
      animation: glowing1 5s linear infinite;
    }

    .head-box6 {
      width: 0.1vw;
      height: 0.2vh;
      position: absolute;
      bottom: 30%;
      left: 0.7%;
      background-color: #fff;
      animation: glowing2 5s linear infinite;
    }

    .head-name {
      width: 150px;
      min-width: 96px;
      height: 24px;
      font-size: 1vw;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      line-height: 24px;
      position: absolute;
      top: 25px;
      left: 2%;
      text-align: center;
    }

    .head-date {
      width: 196px;
      min-width: 196px;
      height: 3vh;
      font-size: 1vw;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      line-height: 3vh;
      position: absolute;
      top: 2vh;
      right: 0.1vw;
      display: flex;
      align-items: center;

      .fullscreen-img {
        width: 1.5vw;
        height: 3vh;
        display: inline-block;
        cursor: pointer;
      }

      .head-date-text {
        height: 4vh;
        line-height: 4vh;
        min-width: 140px;
        text-align: center;
      }
    }
  }

  .bodys {
    margin-top: 2.4vh;

    .body-left {
      width: 100%;
      height: 92vh;

      .today-overview {
        width: 100%;
        height: auto;

        .today-overview-haed {
          width: 100%;
          height: 44px;;
          line-height: 44px;
          position: relative;

          .img-box {
            position: absolute;
            left: 0;
            top: 0;
          }

          .today-img {
            display: inline-block;
            width: 44px;
            height: 44px;
          }

          .today-overview-haed-txt {
            height: 44px;
            font-size: 0.9vw;
            margin-left: 1.2vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #50FAFC;
            line-height: 44px;
            text-shadow: 0px 2px 2px #050A19;
          }

          .router-img {
            display: inline-block;
            width: 100%;
          }

        }

        .today-overview-body {
          margin-top: 2vh;
          display: flex;
          justify-content: space-between;

          .today-overview-body-left {
            background-image: url('../assets/largeScreen/rentalRate.png');
            background-size: 100% 100%;
            height: 8vw;
            width: 100%;
            position: relative;

            .circularRotation-box {
              position: absolute;
              width: 4vw;
              height: 4vw;
              left: 2vw;

              .circularRotation-img {
                display: inline-block;
                width: 100%;
                height: 100%;
                transform: rotate(0deg);
              }
            }

            .circularRotation-txt {
              position: absolute;
              left: 2.4vw;
              bottom: 1vh;
              font-size: 0.8vw;
              font-weight: 400;
              color: #FFFFFF;

            }

            .circularRotation-value {
              position: absolute;
              left: 2.6vw;
              top: 3vh;
              font-size: 1vw;
              font-weight: 400;
              color: #FFFFFF;
              width: 2.7vw;
              text-align: center;
            }
          }

          .today-overview-body-right {
            margin-left: 1.5vw;

            .today-overview-body-top {
              display: flex;
              margin-bottom: 1vh;

              .lease-img {
                display: inline-block;
                width: 3vw;
                height: 3vw;
              }

              .lease-box {
                height: 2.5vh;
                line-height: 2.5vh;
                width: 100%;

                .lease-box-tit {
                  width: 100%;
                  height: 2.5vh;
                  line-height: 2.5vh;

                  .lease-box-tit-tet {
                    font-size: 0.4vw;
                    font-weight: 400;
                    color: #43EDD6;
                    margin-left: 1.5vw;
                  }

                  .car {
                    color: #FF9600
                  }

                  .lease-box-tit-value {
                    font-size: 1.1vw;
                    font-weight: bold;
                    color: #FFFFFF;
                    margin-left: 1vw;
                  }
                }

                .lease-box-body {
                  width: 100%;
                  height: 2vh;
                  line-height: 2vh;
                  position: relative;

                  @keyframes glowing3 {
                    0% {
                      background-position: 0 0;
                      bottom: 26%;
                      left: 5%;
                    }

                    5% {
                      bottom: 59%;
                      left: 10%;
                      width: 0.5vw;
                      height: 0.3vh;
                    }

                    100% {
                      bottom: 59%;
                      left: 85%;
                      width: 0.5vw;
                      height: 0.3vh;
                    }
                  }

                  .head-box7 {
                    width: 0.1vw;
                    height: 0.3vh;
                    position: absolute;
                    bottom: 26%;
                    left: 5%;
                    background: rgba(255, 255, 255, 0.7);
                    animation: glowing3 3s linear infinite;

                  }

                  .lease-box-body-img {
                    display: inline-block;
                    width: 10vw;
                    height: 1vh;
                    margin-left: 0.5vw;
                  }
                }
              }
            }

          }

        }

        .contract-body {
          width: 100%;
          height: 7vh;
          line-height: 20vh;
          display: flex;
          justify-content: space-around;
          margin-top: 2vh;

          .contract-body-box {
            width: 10vw;
            height: 7vh;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: center;
            cursor: pointer;

            .contract-img {
              width: 100%;
              height: 100%;
              display: inline-block;
              position: absolute;
              left: 0;
              top: 0;
            }


            .contract-body-num {
              height: 7vh;
              line-height: 7vh;
              color: #C3CDE5;
              margin-right: 1vw;
              min-width: 96px;
            }

            .contract-body-txt {
              color: #6EE8FF;
              height: 7vh;
              line-height: 7vh;
              font-size: 1.5vw;
            }
          }

        }

        .oeder-body {
          width: 96%;
          height: 11vw;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-left: 1vw;
          margin-top: 1vh;

          .oeder-body-box {
            width: 5vw;
            height: 8vh;
            margin-bottom: 1vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            cursor: pointer;

            .oeder-body-img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;

              .rderBox-img {
                display: inline-block;
                width: 100%;
                height: 100%;
              }
            }

            .oeder-body-num {
              color: #6EE8FF;
              font-size: 1.5vw;
              margin-bottom: 0.5vh;
              height: 50%;
              font-weight: bold;
            }

            .oeder-body-txt {
              color: #E2EBFF;
              font-size: 0.5vw;
            }
          }
        }

      }

      .ailyRent-body {
        width: 98%;
        height: 39vh;
        background-image: url('../assets/largeScreen/orderBoder.png');
        background-size: 100% 39vh;
        margin-top: 2vh;
        position: relative;
        display: flex;
        align-items: center;

        .ailyRent-body-head {
          height: 7.5vh;
          margin-top: 2vh;
          display: flex;
          color: #fff;
          font-size: 1vw;
          line-height: 9.5vh;
          text-align: center;

          .ailyRent-body-head-color {
            color: #6CE4FB;
          }

          .ailyRent-body-head-left {
            cursor: pointer;
          }

          .ailyRent-body-head-right {
            cursor: pointer;
          }
        }

        .orderCardBorder-img {
          display: inline-block;
          position: absolute;
          top: 2vh;
          left: 0.8vw;
          height: 38vh;
          width: 94%;
        }

        .warp {
          height: 90%;
          width: 21vw;
          margin: 0 auto;
          overflow: hidden;
          padding-top: 4%;

          .warp-lis {
            display: flex;
            width: 100%;
            height: 38vh;
            align-items: center;
            justify-content: center;

            .null-img {
              width: 10vw;
              height: 16vh
            }

          }

          .warp-li {
            display: flex;
            width: 100%;
            height: 6vh;
            min-height: 36px;
            align-items: center;
            position: relative;


            .warp-li-box {
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: -1;
            }

            .warp-li-txt {
              display: inline-block;
              font-size: 0.8vw;
              width: 5vw;
              min-width: 96px;
              text-align: center;
              margin-right: 0.5vw;
              margin-left: 0.5vw;
              color: #fff;
              height: 3vh;
              line-height: 3vh;
              cursor: pointer;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .warp-li-value {
              color: #fff;
              font-size: 0.6vw;
              cursor: pointer;
              line-height: 1.6vh;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              padding-right: 0.5vw;
            }

            .color1 {
              background: rgba(12, 41, 70, 0.5);
              border-radius: 4px;
              border: 1px solid #3399FF;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px #1A436C;
              background: linear-gradient(180deg, #CDEEFF 0%, #3399FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color2 {
              background: rgba(28, 75, 77, 0.5);
              border-radius: 4px;
              border: 1px solid #2BA78E;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 6px rgba(0,255,238,0.5);
              background: linear-gradient(180deg, #DAFFF8 0%, #1EF4E0 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color3 {
              background: rgba(89, 26, 27, 0.5);
              border-radius: 4px;
              border: 1px solid #FF4D4F;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px rgba(255,77,79,0.51);
              background: linear-gradient(180deg, #FFE8E7 0%, #FF4D4F 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color4 {
              background: rgba(116, 78, 24, 0.5);
              border-radius: 4px;
              border: 1px solid #FF9600;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px #A46305;
              background: linear-gradient(180deg, #FFEBCF 0%, #D08419 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color5 {
              background: rgba(13, 103, 73, 0.51);
              border-radius: 4px;
              border: 1px solid #18E29F;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px rgba(24,226,159,0.5);
              background: linear-gradient(180deg, #D6FFF1 0%, #18E29F 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

        }
      }

    }

    .body-center-head {
      width: 100%;
      height: 4vw;
      display: flex;
      justify-content: center;

      .body-center-head-box {
        padding: 0 1.5vw;
        width: 94%;
        height: 8vh;
        display: flex;
        justify-content: space-between;
        .statisticsItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          .statisticsTitle {
            display: block;
            padding: 1vh 1.3vh;
            width: 100%;
            height: 3.5vh;
            text-align: center;
            font-size: 0.5vw;
            font-weight: 500;
            color: #17F3FF;
            background-image: url("../assets/largeScreen/statistic_title.png");
            background-size: 100% 100%;
          }
          .statisticsValue {
            margin-top: 1vh;
            display: block;
            padding: 0.3vh;
            width: 100%;
            height: 5vh;
            text-align: center;
            font-size: 1.5vw;
            font-weight: bold;
            font-family: DINAlternate-Bold, DINAlternate;
            color: #FFC420;
            text-align: center;
            background-image: url("../assets/largeScreen/statistic_value.png");
            background-size: 100% 100%;
          }
        }
        .head-box {
          display: flex;
          align-items: center;
          height: 8vh;
          width: 50%;
          cursor: pointer;

          .receivable-img {
            display: inline-block;
            width: 7vw;
            height: 9vh;
          }

          .head-box-text {
            height: 6vh;

            .warp1 {
              width: 1vw;
              height: 2vh;
              overflow: hidden;
            }

            .head-box-text-txt {
              font-weight: 400;
              color: #6EE8FF;
              line-height: 3vh;
              text-align: center;
              font-size: 0.8vw;
            }

            .head-box-text-num {
              font-size: 1.2vw;
              font-weight: bold;
              color: #FFAF2C;
              line-height: 3vh;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .box2 {
          display: flex;
          justify-content: flex-end
        }
      }
    }

    .body-center {
      .today-overview-haed {
        width: 100%;
        height: 44px;;
        line-height: 44px;
        position: relative;

        .img-box {
          position: absolute;
          left: 0;
          top: 0;
        }

        .today-img {
          display: inline-block;
          width: 44px;
          height: 44px;
        }

        .today-overview-haed-txt {
          height: 44px;
          font-size: 0.9vw;
          margin-left: 1.2vw;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #50FAFC;
          line-height: 44px;
          text-shadow: 0px 2px 2px #050A19;
        }

        .router-img {
          display: inline-block;
          width: 100%;
        }

      }
    }

    .body-right {
      .body-right-box {
        width: 100%;
        height: auto;

        .today-overview-haed {
          width: 100%;
          height: 44px;;
          line-height: 44px;
          position: relative;

          .img-box {
            position: absolute;
            left: 0;
            top: 0;
          }

          .today-img {
            display: inline-block;
            width: 44px;
            height: 44px;
          }

          .today-overview-haed-txt {
            height: 44px;
            font-size: 0.9vw;
            margin-left: 1.2vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #50FAFC;
            line-height: 44px;
            text-shadow: 0px 2px 2px #050A19;
          }

          .router-img {
            display: inline-block;
            width: 100%;
          }

        }

        .body-right-car {
          width: 100%;
          height: 9.3vw;
          display: flex;
          justify-content: center;
          align-items: center;

          .car-box {
            width: 80%;
            height: 100%;
            background-image: url('../assets/largeScreen/cars.png');
            background-size: 98% 100%;
            position: relative;

            .car-box-img {
              display: inline-block;
              position: absolute;
              left: 25%;
              top: 0%;
              width: 48%;
              height: 100%;
              transform: rotate(0deg);

            }


            .car-box1-num {
              font-size: 0.9vw;
              color: #6EE8FF;
              margin-right: 0.5vw;
              font-weight: bold;
            }

            .car-box2-num {
              font-size: 0.9vw;
              color: #6EE8FF;
              margin-left: 0.5vw;
              font-weight: bold;
            }

            .car-box1 {
              position: absolute;
              left: 2%;
              top: 15%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 4.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row-reverse;
              cursor: pointer;
            }

            .car-box2 {
              position: absolute;
              left: 0%;
              top: 42%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 4.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row-reverse;
              cursor: pointer;
            }

            .car-box3 {
              position: absolute;
              left: 2%;
              top: 68%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 4.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row-reverse;
              cursor: pointer;
            }

            .car-box4 {
              position: absolute;
              left: 39%;
              top: 34%;
              text-align: center;
              color: #E2EBFF;
              font-size: 1vw;
              width: 4vw;
              height: 3vh;
              line-height: 3vh;
              cursor: pointer;

              .car-box4-num {
                color: #6EE8FF;
                font-weight: bold;

              }
            }

            .car-box5 {
              position: absolute;
              right: 0%;
              top: 15%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 5.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row;
              cursor: pointer;
            }

            .car-box6 {
              position: absolute;
              right: -2%;
              top: 42%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 5.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row;
              cursor: pointer;
            }

            .car-box7 {
              position: absolute;
              right: 0%;
              top: 68%;
              color: #E2EBFF;
              font-size: 0.5vw;
              width: 5.5vw;
              height: 3vh;
              line-height: 3vh;
              display: flex;
              align-items: center;
              flex-direction: row;
              cursor: pointer;
            }

            .carColoryellow {
              color: rgb(244, 133, 97) !important
            }

            .carColorred {
              color: rgb(252, 96, 121) !important
            }

          }
        }

        .today-overview-regulations {
          width: 21vw;
          height: 8vw;
          margin: 1vh 0vw 1vh 2vw;
          background-size: 19vw 16vh;

          .today-overview-regulations-box {
            width: 100%;
            height: 50%;
            display: flex;

            .today-box {
              width: 40%;
              height: 90%;
              margin-right: 5%;
              text-align: center;
              color: #C3CDE5;
              font-size: 0.8vw;
              cursor: pointer;


              .today-box-txt {
                width: 80%;
                margin-left: 20%;
                font-size: 0.5vw;
              }

              .today-box-num {
                margin-top: 0.5vh;
                font-size: 1vw;
                font-weight: bold;
                width: 80%;
                margin-left: 20%;
              }
            }

            .box-img1 {
              background-image: url('../assets/largeScreen/car1.png');
              background-size: 100% 100%;

            }

            .box-img2 {
              background-image: url('../assets/largeScreen/car2.png');
              background-size: 100% 100%;

            }

            .box-img3 {
              background-image: url('../assets/largeScreen/car3.png');
              background-size: 100% 100%;

            }

            .box-img4 {
              background-image: url('../assets/largeScreen/car4.png');
              background-size: 100% 100%;


            }

          }
        }

        .alert-box {
          width: 90%;
          height: 18vh;

          .alert-box-value {
            width: 88%;
            height: 8vh;
            box-shadow: inset 0px 0px 10px 0px rgba(32, 220, 236, 0.4);
            border-radius: 4px;
            text-align: center;
            padding-top: 1vh;
            margin: 0 0.5vw 0.5vw 0;
            cursor: pointer;

            .alert-box-value-num {
              font-size: 1.5vw;
              font-weight: bold;
              color: #6EE8FF;
            }

            .alert-box-value-text {
              font-size: 0.8vw;
              color: #C3CDE5;
            }
          }
        }
      }

      .ailyRent-body {
        width: 100%;
        height: 22vh;
        background-image: url('../assets/largeScreen/orderBoder.png');
        background-size: 100% 100%;
        margin-top: 1vh;
        position: relative;
        display: flex;
        align-items: center;

        .ailyRent-body-head {
          height: 7.5vh;
          margin-top: 2vh;
          display: flex;
          color: #fff;
          font-size: 1vw;
          line-height: 7.5vh;
          text-align: center;


          .ailyRent-body-head-color {
            color: #6CE4FB;
          }

          .ailyRent-body-head-left {
            cursor: pointer;
          }

          .ailyRent-body-head-right {
            cursor: pointer;
          }
        }

        .orderCardBorder-img {
          display: inline-block;
          position: absolute;
          top: 2vh;
          left: 0.8vw;
          height: 23vh;
          width: 94%;
        }

        .warp {
          height: 19vh;
          width: 23vw;
          margin: 0 auto;
          overflow: hidden;

          .warp-lis1 {
            display: flex;
            width: 100%;
            height: 10vw;
            align-items: center;
            justify-content: center;

            .null-img1 {
              width: 8vw;
              height: 12vh
            }
          }

          .warp-li1 {
            display: flex;
            width: 100%;
            height: 4vh;
            min-height: 36px;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 0 1vw 0 0.5vw;

            .warp-li-box {
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: -1;
            }

            .warp-li-txt1 {
              display: inline-block;
              font-size: 0.8vw;
              width: 7vw;
              min-width: 96px;
              text-align: center;
              margin-right: 0.5vw;
              margin-left: 0.5vw;
              color: #fff;
              height: 3vh;
              line-height: 3vh;
              overflow: hidden;
              cursor: pointer
            }

            .warp-li-value {
              color: #fff;
              cursor: pointer;
            }

            .color1 {
              background: rgba(12, 41, 70, 0.5);
              border-radius: 4px;
              border: 1px solid #3399FF;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px #1D6AB6;
              background: linear-gradient(180deg, #CDEEFF 0%, #3399FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color2 {
              background: rgba(28, 75, 77, 0.5);
              border-radius: 4px;
              border: 1px solid #2BA78E;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px rgba(1, 255, 238, 0.5);
              background: linear-gradient(180deg, #DAFFF8 0%, #1EF4E0 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .color3 {
              color: #FF4D4F;
              background: rgba(89, 26, 27, 0.5);
              border-radius: 4px;
              border: 1px solid #FF4D4F
            }

            .color4 {
              color: #FF9600;
              background: rgba(116, 78, 24, 0.5);
              border-radius: 4px;
              border: 1px solid #FF9600
            }

            .color5 {
              color: #D4E5FF;
              background: rgba(13, 103, 73, 0.5);
              border-radius: 4px;
              border: 1px solid #18E29F;
            }

            .color6 {
              color: #FF7C4D;
              background: rgba(89, 43, 26, 0.5);
              border-radius: 4px;
              border: 1px solid #FF764D;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #D4E5FF;
              line-height: 24px;
              text-shadow: 0px 0px 4px rgba(255, 124, 77, 0.51);
              background: linear-gradient(180deg, #FFEEE7 0%, #FF784D 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

        }
      }

    }

  }

}
</style>
